<template>
  <el-container v-loading="loading">

    <el-row>
      <el-button
        icon="fa fa-fw fa-refresh"
        size="mini"
        type="info"
        @click="handleRefresh">
      </el-button>

      <div class="autocomplete-group">
        <span>配送人员查询：</span>
        <el-autocomplete
          v-model="constraintForm.text"
          :fetch-suggestions="querySearchAsync"
          placeholder="请选择配送人员"
          @select="handleSelect"
          clearable
          size="small">
          <template slot-scope="{ item }">
            <div>{{ item.name }}</div>
          </template>
          <el-button slot="append" icon="el-icon-search" @click="getData"></el-button>
        </el-autocomplete>
      </div>
    </el-row>

    <el-table
      @selection-change="handleSelectionChange"
      :data="tableData"
      tooltip-effect="dark"
      border
      :default-sort="{prop: 'date', order: 'descending'}"
      :row-class-name="tableRowClassName"
      size="small">
      <el-table-column
        type="selection"
        width="55"
        fixed>
      </el-table-column>

      <el-table-column
        prop="user.nickname"
        label="昵称"
        width="120">
      </el-table-column>

      <el-table-column
        prop="user.member_grade"
        label="等级"
        width="120">
        <template slot-scope="scope">
          <el-tag>{{scope.row.user.member_grade}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="phone"
        label="电话"
        width="120">
      </el-table-column>

      <el-table-column
        prop="order_no"
        label="订单号"
        width="180">
      </el-table-column>

      <el-table-column
        prop="goods"
        label="商品"
        width="180">
      </el-table-column>

      <el-table-column
        prop="start_adds"
        label="开始地址"
        width="250">
      </el-table-column>

      <el-table-column
        prop="target_adds"
        label="目的地址"
        width="250">
      </el-table-column>

      <el-table-column
        prop="class_id"
        label="订单类型"
        width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.class_id==1">帮我买</el-tag>
          <el-tag v-if="scope.row.class_id==2">帮我送</el-tag>
          <el-tag v-if="scope.row.class_id==3">待排队</el-tag>
          <el-tag v-if="scope.row.class_id==4">代驾</el-tag>
          <el-tag v-if="scope.row.class_id==5">家政</el-tag>
          <el-tag v-if="scope.row.class_id==6">代办</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="total_price"
        label="总价"
        width="120">
        <template slot-scope="scope">
          <i class="fa fa-fw fa-rmb"></i>
          <span style="margin-left: 10px">{{ scope.row.total_price }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="pay_price"
        label="实际支付"
        width="120">
        <template slot-scope="scope">
          <i class="fa fa-fw fa-rmb"></i>
          <span style="margin-left: 10px">{{ scope.row.pay_price }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="pay_time"
        label="支付时间"
        width="180">
        <template slot-scope="scope">
          <i class="fa fa-clock-o fa-fw"></i>
          <span style="margin-left: 10px">{{ scope.row.pay_time }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="expect_time"
        label="期望时间"
        width="180">
        <template slot-scope="scope">
          <i class="fa fa-clock-o fa-fw"></i>
          <span style="margin-left: 10px">{{ scope.row.expect_time }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="remark"
        label="备注"
        width="180"
        show-overflow-tooltip>
      </el-table-column>

      <el-table-column
        label="操作"
        fixed="right">
        <template slot-scope="scope" class="operate-column">

          <el-button
            circle
            icon="fa fa-fw fa-handshake-o"
            size="mini"
            type="primary"
            title="订单分配"
            @click="taskAppointItem(scope.$index, scope.row)">
          </el-button>

        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.currentPage"
      :page-sizes="pagination.pageSizes"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

  </el-container>
</template>

<script>
  export default {
    mounted: function () {
      this.getData();
    },
    methods: {
      /**
       * 数据请求
       * */
      getData: function () {
        let _this = this;
        this.api.getTaskOrderList({
          page: this.pagination.currentPage,
          paginate: this.pagination.pageSize
        }).then(function (res) {
          if (res.code == 1) {
            _this.tableData = res.data.data;
            _this.pagination.total = res.data.total;
          }
          _this.loading = false;
        }).catch(function (res) {
          throw new Error(res);
        });
      },
      /**
       * 分页数改变
       */
      handleSizeChange: function (pageSize) {
        this.pagination.pageSize = pageSize;
        this.getData();
      },
      /**
       * 当前页面改变
       * @param currentPage
       */
      handleCurrentChange: function (currentPage) {
        this.pagination.currentPage = currentPage;
        this.getData();
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row'
        } else if (rowIndex === 3) {
          return 'success-row'
        }
        return ''
      },
      /**
       * 编辑单个
       * */
      taskAppointItem(index, row) {
        let _this = this;
        let _id = row.id;
        if(_this.constraintForm.text == "" || _this.constraintForm.id == ''){
          this.$message({
            type: 'warning',
            message: '请选在上方进行筛选需要派单的服务人员'
          })
          return;
        }
        this.$confirm('此操作将订单分派给: '+ _this.constraintForm.text +', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.api.taskAppoint({
            oid: _id,
            rid: _this.constraintForm.id
          }).then(function (res) {
            if (res.code == 1) {
              _this.getData();
              _this.$message({
                showClose: true,
                message: res.msg,
                type: 'success',
              });
            } else {
              _this.$message({
                showClose: true,
                message: res.msg,
                type: 'warning'
              });
            }
          }).catch(function (res) {
            throw new Error(res);
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消该操作'
          })
        })
      },
      /**
       * 数据刷新
       */
      handleRefresh: function () {
        this.getData();
        this.$message({
          showClose: true,
          message: '刷新成功',
          type: 'success'
        });
      },
      /**
       * 表格选中状态记录
       * @param val
       */
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      /**
       * 条件数据检索
       */
      constraintSearchData: function () {
        this.getData();
        this.$message({
          showClose: true,
          message: '查询成功',
          type: 'success'
        });
      },
      /**
       * 远程数据加载
       */
      querySearchAsync(queryString, cb) {
        let _this = this;
        this.api.searchRunnerByUserName({name: queryString}).then(function (res) {
          if (res.code == '1') {
            cb(res.data.data);
          }
        }).catch(function (res) {
          throw new Error(res);
        });
      },
      /**
       * 搜索下拉选择
       * @param item
       */
      handleSelect(item) {
        this.constraintForm.text = item.name;
        this.constraintForm.id = item.id;
      },
    },
    data() {
      return {
        loading: true,  // 页面加载
        // tableData: [
        //   {
        //     id:3,                //类型：Number  必有字段  备注：订单id
        //     name:"哈哈",                //类型：String  必有字段  备注：订单用户名
        //     phone:"13165723186",                //类型：String  必有字段  备注：电话
        //     uid:16,                //类型：Number  必有字段  备注：关联用户名
        //     rid:0,                //类型：Number  必有字段  备注：跑腿id，这个不用管
        //     order_no:"2018090313544296952739",                //类型：String  必有字段  备注：订单号
        //     class_id:1,                //类型：Number  必有字段  备注：1帮我买2帮我送3带排队4代驾5家政6代办
        //     pic:"mock",                //类型：String  必有字段  备注：图片路径
        //     pics:"mixed",                //类型：Mixed  必有字段  备注：图片合集
        //     voice:"mock",                //类型：String  必有字段  备注：语音
        //     goods:"来包烟",                //类型：String  必有字段  备注：商品名
        //     total_price:"64.04",                //类型：String  必有字段  备注：总价
        //     pay_price:"43.04",                //类型：String  必有字段  备注：实际支付
        //     weight:0,                //类型：Number  必有字段  备注：重量
        //     start_adds:"陕西省西安市莲湖区鼓楼",                //类型：String  必有字段  备注：开始地址
        //     start_adds_location:{                //类型：Object  必有字段  备注：开始地址经纬度
        //       lng:108.91554659362,                //类型：Number  必有字段  备注：无
        //       lat:34.273192373169                //类型：Number  必有字段  备注：无
        //     },
        //     target_adds:"陕西省西安市未央区凤城一路西铁小区",                //类型：String  必有字段  备注：目的地址
        //     target_adds_location:{                //类型：Object  必有字段  备注：目的地址经纬度
        //       lng:108.91554659362,                //类型：Number  必有字段  备注：无
        //       lat:34.273192373169                //类型：Number  必有字段  备注：无
        //     },
        //     remark:"mock",                //类型：String  必有字段  备注：订单备注
        //     pay_time:0,                //类型：Number  必有字段  备注：支付时间
        //     expect_time:0,                //类型：Number  必有字段  备注：期望时间
        //     bargaining:0,                //类型：Number  必有字段  备注：是否接受议价
        //     user:{                //类型：Object  必有字段  备注：关联下单用户
        //       id:16,                //类型：Number  必有字段  备注：用户id
        //       nickname:"小角色.",                //类型：String  必有字段  备注：昵称
        //       member_grade:3                //类型：Number  必有字段  备注：等级
        //     }
        //   },
        // ],
        multipleSelection: [],
        pagination: {
          total: 5,
          currentPage: 1,
          pageSize: 10,
          pageSizes: [5, 10, 20, 25, 30, 50, 100],
        },
        constraintForm: {
          text: '',    // 检索姓名，默认''
          id: '',    // 用户id，默认0
        }
      }
    },
  }
</script>

<style scoped>
  .el-container {
    display: block;
  }

  .el-table, .el-row {
    width: 98% !important;
    margin: 15px auto;
  }

  .el-pagination {
    text-align: center;
    margin: 15px 0;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .logo-img {
    width: 40px;
    height: 40px;
  }

  .autocomplete-group{
    display: inline-block;
    margin-left: 15px;
    font-size: 12px;
  }
</style>
